feat(apollo-react): add LoopNodeExecutionCount component by 1980computer · Pull Request #753 · UiPath/apollo-ui

1980computer · 2026-05-26T13:55:05Z

Summary

Extracts the unified segmented pill from LoopNode V2 proposals into a standalone exported component: LoopNodeExecutionCount
Adds LoopNodeExecutionCountState and iterationPillState as a first-class prop on LoopNode — the component derives the size tier from its measured width automatically, no overlay wrappers needed
Exports LoopNodeExecutionCount and LoopNodeExecutionCountState from the LoopNode module index
Adds a Wind-style Execution Count doc page under Components/Nodes/LoopNode with:
- Live canvas preview with four stacked nodes: default All state, full tier, compact tier, minimal tier
- Expand/collapse overlay (90vw × 90vh)
- Anatomy section (collapsible): default All-state pill, three responsive tier cards with live interactive pills, breakpoint spec table, Count Range (1–999) visual
- Header Layout section (collapsible): live header mockup with annotated A/B/C callouts and region spec table
- How to use section (collapsible): copy-ready usage snippet
- Expand all / Collapse all toggle above the three sections
Adds unit tests (LoopNodeExecutionCount.test.tsx) covering all key behaviors: navigation, All toggle, inline edit, jump-to-failed, size tiers, and status color mapping

Component: `LoopNodeExecutionCount`

Props:

state: LoopNodeExecutionCountState — active index, total, navigation callbacks, per-iteration statuses, overall status
size?: 'full' | 'compact' | 'minimal' — responsive tier (auto-computed by LoopNode from its measured width)

Size tiers:

Node width	Tier	Controls
≥ 400 px	`full`	All toggle · ‹ prev · k/N (click-to-type) · next › · jump-to-failed ⊕
260–399 px	`compact`	All toggle · k/N (click-to-type) · jump-to-failed ⊕
< 260 px	`minimal`	Read-only count chip

Default state: pill opens in the All view showing aggregate execution summary (✓ completed / ✗ failed). Clicking All toggles into individual iteration navigation.

Test plan

Open Storybook → Components / Nodes / LoopNode / Execution Count
Verify four canvas nodes render stacked vertically with correct tier sizes and default All state on the top node
Interact: All toggle, prev/next navigation, click-to-type jump, jump-to-failed crosshair
Expand canvas preview to 90vw × 90vh and back — single canvas instance, no ReactFlow errors
Open/close each collapsible section individually; verify Expand all / Collapse all button
Verify Count Range row shows pills from 1/1 through 999/999 without overflow
Interact with the Header Layout visual mockup pill
pnpm --filter @uipath/apollo-react run format:check passes
Unit tests pass: 37 tests covering navigation, All toggle, inline edit, jump-to-failed, size tiers, status colors

🤖 Generated with Claude Code

- Ignore .codeviz/ (code visualisation tool output) - Ignore apps/apollo-chat/ (uninitialised scaffold with no source) - Ignore **/locales/*.js (compiled lingui output; *.ts was already ignored) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-05-26T13:55:45Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	May 27, 2026, 07:34:30 AM
apollo-docs	🟢 Ready	Preview, Logs	May 27, 2026, 07:34:30 AM
apollo-landing	🟢 Ready	Preview, Logs	May 27, 2026, 07:34:30 AM
apollo-ui-react	🟢 Ready	Preview, Logs	May 27, 2026, 07:34:30 AM
apollo-vertex	🟢 Ready	Preview, Logs	May 27, 2026, 07:34:30 AM

github-actions · 2026-05-26T13:56:31Z

Dependency License Review

✅ 1901 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1671
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

…n Count story Extracts the Option B iteration navigator from the V2 story proposals into a standalone reusable component. IterationNavigatorPill is a unified segmented pill with an All aggregate toggle, per-iteration status dots, click-to-type jump, and a crosshair shortcut to the first failed iteration. Adapts responsively across three size tiers (full ≥400px, compact 260-399px, minimal <260px) derived from props.width. Adds LoopIterationPillState to LoopNode.types and exports the component from the LoopNode module index. Adds an Execution Count doc-layout story to Components/LoopNode showing all three tiers in a live canvas preview with anatomy cards, breakpoint spec table, and usage code block. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions Bot added pkg:apollo-react size:XL 500-999 changed lines. labels May 26, 2026

1980computer force-pushed the loopnode-execution-count branch 8 times, most recently from 5d97096 to 4d737ef Compare May 26, 2026 14:32

github-actions Bot added size:XXL 1,000+ changed lines. and removed size:XL 500-999 changed lines. labels May 26, 2026

1980computer force-pushed the loopnode-execution-count branch 9 times, most recently from 549df77 to 935fcf0 Compare May 26, 2026 14:48

1980computer marked this pull request as ready for review May 26, 2026 14:48

1980computer force-pushed the loopnode-execution-count branch 4 times, most recently from b1c254f to 4a59ada Compare May 26, 2026 15:13

github-code-quality Bot found potential problems May 26, 2026

View reviewed changes

Comment thread packages/apollo-react/src/canvas/components/LoopNode/LoopNodeExecutionCount.test.tsx Fixed

Comment thread packages/apollo-react/src/canvas/components/LoopNode/LoopNodeExecutionCount.test.tsx Fixed

1980computer force-pushed the loopnode-execution-count branch from 4a59ada to c41b49a Compare May 26, 2026 17:33

1980computer changed the title ~~feat(apollo-react): IterationNavigatorPill — reusable execution count component~~ feat(apollo-react): add LoopNodeExecutionCount component May 26, 2026

1980computer requested review from BenGSchulz and CalinaCristian May 26, 2026 17:36